<template>
  <div class="login">
    <div class="username">
      <h3>{{ $t("language.loginhome.name") }}</h3>
      <el-form class="loginfrom" ref="loginform" :label-position="logininfo.labelPosition" :model="logininfo.loginform"
        :rules="loginrules" style="width: 90%">
        <el-form-item label="" prop="mobile">
          <div class="phone" tabindex="0">
            <el-input clearable :placeholder="$t('language.erolls.input1')" style="width: 100%; color: #fff"
              v-model="logininfo.loginform.mobile" :rules="loginrules">
              <template #prepend>
                <NuxtImg :src="select" alt="" />
                <strong></strong>
                <div class="select">
                  <span @click="rotate = !rotate">+{{ logininfo.loginform.countryCode }}</span>
                  <el-icon @click="rotate = !rotate" color="#fff" :class="rotate ? 'rotate' : ''">
                    <arrow-down />
                  </el-icon>
                  <ul :class="rotate ? 'downlist' : ''">
                    <li v-for="(item, index) in country" @click="countrycode(item)" :key="index">
                      <NuxtImg :src="item.img" alt="" />
                      <span>{{ item.num }}</span>
                    </li>
                  </ul>
                </div>
              </template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="" prop="password">
          <div class="password" tabindex="0">
            <el-input clearable :type="open ? 'word' : 'password'" style="width: 100%"
              :placeholder="$t('language.erolls.input3')" v-model="logininfo.loginform.password">
              <template #prepend>
                <el-icon color="#c0c4cc" size="32">
                  <Lock />
                </el-icon>
                <strong></strong>
              </template>
              <template #append>
                <el-icon v-if="open" @click="open = !open" color="#c0c4cc" size="24">
                  <View />
                </el-icon>
                <el-icon v-else color="#c0c4cc" @click="open = !open" size="24">
                  <Hide />
                </el-icon>
              </template>
            </el-input>
          </div>
        </el-form-item>
      </el-form>
      <div class="checkbox">
        <el-checkbox text-color="#606266" v-model="rememberinfo">{{
        $t("language.loginhome.check")
      }}</el-checkbox>
        <span @click.prevent="openforget">{{
        $t("language.loginhome.tips")
      }}</span>
      </div>
      <el-button :loading="logininfo.loading" :disabled="logininfo.loading" @click="submitForm" class="login">{{
        $t("language.loginhome.login") }}</el-button>
    </div>
    <div class="forgetdialog">
      <el-dialog width="90%" v-model="initVisible2" :show-close="false">
        <div id="bigcloser" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px">
          <strong></strong>
          <h4>
            {{ $t("language.forget.name") }}
          </h4>
          <span @click="initVisible2 = false">
            <el-icon color="#b5b6c8" size="16">
              <CloseBold />
            </el-icon>
          </span>
        </div>
        <div class="dialogmain">
          <el-form ref="ruleFormRef" :model="forget" :rules="forgetrules" label-width="auto" class="demo-ruleForm"
            label-position="top" status-icon>
            <el-form-item :label="$t('language.forget.title')" prop="phone">
              <el-input :placeholder="$t('language.forget.placehold')" v-model="forget.phone" />
            </el-form-item>
          </el-form>
          <el-button class="confirm">{{ $t("language.forget.btn") }}</el-button>
          <p class="text">
            {{ $t("language.forget.text1") }}
            <span>{{ $t("language.forget.text2") }}</span>
          </p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CloseBold, View, Hide, Lock } from '@element-plus/icons-vue'
import { reactive, watch, ref,shallowRef } from "vue";
import { useI18n } from "vue-i18n";


const { t } = useI18n();
//获取当前路由
const { currentRoute } = useRoute();
let openforget = () => {
  store.$patch({loginopen:false})
}
let open = shallowRef<boolean>(true);
const logininfo: any = reactive({
  loginform: {
    // mobile: undefined,
    // password: undefined,
    mobile: "",
    password: "",
    countryCode: "55",
  },
  labelPosition: "right",
  loading: false,
});
// //本地存储方案一
// let token = useToken()//存储token
// let userinfo = useUserinfo()//存储用户信息
// let coininfo = useCoininfo()//存储token
// let cointype = useCointype()//存储用户信息
// let loginopen = useLoginopen()//是否关闭登录弹窗
// let mobile = useMobile()//保存用户手机号
// let password = usePassword()//保存用户密码
// let remember = useRemember()//保存用户密码
//本地存储方案二
const store = useStore()
let token = computed(() => store.token)//存储token
let userinfo: any = computed(() => store.userinfo)//存储用户信息
let coininfo: any = computed(() => store.coininfo)//存储token
let cointype = computed(() => store.cointype)//存储用户信息
let loginopen = computed(() => store.$state.loginopen)//是否关闭登录弹窗
let mobile = computed(() => store.mobile)//保存用户手机号
let password: any = computed(() => store.password)//保存用户密码
let remember = computed(() => store.remember)//保存用户密码
//忘记密码
let initVisible2 = ref(false);
let forget = reactive({
  phone: "",
});
let forgetrules = reactive({});
//记住密码
let rememberinfo = ref(false);
watch(
  () => initVisible2.value,
  () => {
    logininfo.loginform.password = decrypt(password.value);
    logininfo.loginform.mobile = mobile.value
    rememberinfo.value = remember.value
  },
  {
    immediate: true,
  }
);

//选择国家code

watch(
  [
    () => rememberinfo.value,
    () => logininfo.loginform.password,
    () => logininfo.loginform.mobile,
  ],
  (newval) => {
    logininfo.loginform.mobile = logininfo.loginform.mobile.replace(/[^0-9a-zA-Z_\.]*$/g, '')
    logininfo.loginform.password = logininfo.loginform.password.replace(/[^0-9a-zA-Z_\.]*$/g, '')
    const encryptpassword = encrypt(logininfo.loginform.password);
    if (newval[0]) {
      store.password = encryptpassword
      store.mobile = logininfo.loginform.mobile
      store.remember = rememberinfo.value
    } else {
      store.password = ''
      store.mobile = ''
      store.remember = false
    }

  }
);
let country = reactive([
  {
    num: "55",
    img: "/img/guoqi_03.png",
  },
  {
    num: "63",
    img: "/img/country1.png",
  },
  {
    num: "1",
    img: "/img/guoqi_01.png",
  },
  {
    num: "62",
    img: "/img/country2.png",
  },
  {
    num: "52",
    img: "/img/country3.png",
  },
  {
    num: "91",
    img: "/img/country4.jpg",
  },
]);
let rotate = ref(false);

//表单规则

const loginrules = reactive({
  mobile: [
    {
      required: true,
      message: t("language.loginhome.tipsphone"),
      trigger: ["blur"],
    },
    {
      min: 6,
      max: 20,
      message: t("language.loginhome.tips2"),
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: t("language.loginhome.tipsword"),
      trigger: "blur",
    },
    {
      min: 6,
      max: 20,
      message: t("language.loginhome.tips2"),
      trigger: "blur",
    },
  ],
});
//提交信息
let select = ref("/img/guoqi_03.png");
let countrycode = (item: any) => {
  logininfo.loginform.countryCode = item.num;
  rotate.value = !rotate.value;
  select.value = item.img;
};
let loginform: any = ref(null);
let submitForm = () => {
  loginform.value.validate((valid: any) => {
    if (valid) {
      logininfo.loading = true;
      let form = JSON.parse(JSON.stringify(logininfo.loginform));
      form.password = encrypt(logininfo.loginform.password)
        .toString()
        .substring(0, 32);
      useHttpPOST("/UserCenter/v1.0/Web/Login/Phone", {
        ...form,
      })
        .then((res: any) => {
          switch (res.data.value.code) {
            case 5077:
              ElMessage({
                message: t("language.commontips.usernoexist"),
                type: "error",
                duration: 1000,
              });
              break;
            case 0:
              ElMessage({
                message: t("language.commontips.erollsuccess"),
                type: "success",
                duration: 1000,
                onClose: () => {
                  store.$patch({
                    token: res.data.value.data.jwtToken
                  })
                  store.$patch({ userinfo: res.data.value.data.info })
                  // store.userinfo = res.data.value.data.info
                  // console.log(store.token,'store545');

                  GetUserInfo(res.data.value.data.info).then(({ data }: { data: any }) => {
                    store.$patch({ coininfo: data.value.data.accounts })
                    store.$patch({ cointype: "BRL" })
                    store.$patch({ loginopen: false })
                  })
                }
              });


              break;
          }

        })
        .finally(() => {
          logininfo.loading = false;
        });
      // debugger
    } else {
      // console.log(54545);
      return false;
    }
  });
};
</script>
<style lang="scss">
.login {
  width: 100%;

  .forgetdialog {
    :deep(.el-form-item) {
      margin-bottom: 28px;
    }

    #bigcloser {
      width: 100%;
      @include flex(row, flex-end, center);

      strong {
        display: block;
        width: 28px;
        height: 28px;
      }

      h4 {
        flex: 1;
        font-size: 18px;
        color: #fff;
        text-align: center;
      }

      span {
        display: block;
        width: 28px;
        height: 28px;
        @include flex(row, center, center);
        border: 2px solid #b5b6c8;
        border-radius: 16px;
        margin-right: -7px;
      }
    }

    .el-input__wrapper {
      background-color: rgb(39, 42, 48) !important;
      box-shadow: none;
      border: 1px solid #4a4c53;
      height: 40px !important;
      color: #fff;

      border-radius: 10px;
    }

    .el-dialog {
      padding: 15px !important;
      background-color: rgb(50, 53, 62) !important;
      border-radius: 10px !important;
    }

    .el-form-item__label {
      color: #fff;
      font-size: 20px;
      margin-bottom: 14px !important;
    }

    .dialogmain {
      padding: 30px 40px;

      .confirm {
        background: #0a906c !important;
        border: none;
        color: #fff;
        display: block;
        width: 100%;
        height: 40px;
        padding: 0;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        margin: 20px auto 20px;
      }

      .text {
        font-size: 13px;
        width: 100%;
        color: #b5bac8;
        margin: 13px 0;

        span {
          color: #03b484;
          font-size: 14px;
        }
      }
    }

    .el-dialog__header {
      padding: 0 !important;
    }
  }

  .username {
    width: 100%;
    position: absolute;
    height: 320px;
    left: 0;
    top: 0;

    .el-form-item {
      margin-bottom: 28px !important;
    }

    .el-input__inner {
      color: #fff !important;
    }

    .el-select,
    .el-input {
      border: none !important;
      box-shadow: none !important;
      border-radius: 10px !important;
      border: 1px solid #4a4c53 !important;
    }

    :deep(.el-input__wrapper.is-focused) {
      border-color: #0a906c !important;
    }

    .el-input__wrapper,
    .el-tooltip__trigger {
      box-shadow: none !important;
      border: none !important;
      border-radius: 10px !important;
    }

    .el-select,
    .el-input {
      border: none !important;
      box-shadow: none !important;
      border-radius: 10px !important;
      border: 1px solid #4a4c53 !important;
    }

    .el-input-group__append {
      background-color: rgb(40, 43, 48);
      box-shadow: none !important;
      border: none !important;
      border-radius: 10px !important;
    }

    .el-input-group__prepend {
      background-color: rgb(40, 43, 48);
      box-shadow: none !important;
      border: none !important;
      padding: 0;
      border-radius: 10px !important;
    }

    .el-select__prefix {
      gap: 0px;
    }

    .el-input-group__append {
      padding: 0 10px;
    }

    .el-input__wrapper.is-focus {
      border-color: rgb(0, 144, 109) !important;
    }

    @include flex(column, flex-start, center);

    >h3 {
      font-size: 24px;
      color: #fff;
      padding: 18px 0;
    }

    .el-input,
    .el-input__inner {
      height: 42px !important;
    }

    .el-input__wrapper {
      height: 40px !important;
      padding: 0 10px !important;
    }

    .phone {
      width: 100%;
      @include flex(row, flex-start, center);
      border-radius: 10px;
      background-color: rgb(40, 43, 48);
      border: 1px solid transparent;

      &:hover {
        border: 1px solid #0a906c;
      }

      &:focus {
        border: 1px solid #0a906c;
        outline: none;
      }

      &:focus-within {
        border: 1px solid #0a906c;
        outline: none;
      }


      img {
        border-radius: 16px;
      }

      .select {
        width: 70px;
        position: relative;
        @include flex(row, center, center);

        span {
          font-size: 16px;
          color: #fff;
        }

        .el-icon {
          transition: all 0.5s;
        }

        .downlist {
          opacity: 1;
          display: block;
        }

        ul {
          opacity: 0;
          padding: 6px 0;
          transition: all 0.3s;
          position: absolute;
          top: 45px;
          z-index: 20;
          width: 88px;
          display: none;
          background-color: rgb(39, 42, 48);
          border-radius: 5px;

          li:nth-child(1) {
            &::after {
              content: "";
              position: absolute;
              top: -7px;
              left: 10px;
              z-index: 21;
              transform: translateY(-50%);
              border-left: 7px solid transparent;
              border-right: 7px solid transparent;
              border-bottom: 7px solid rgb(39, 42, 48);
              border-top: 7px solid transparent;
              /* 三角标颜色 */
            }
          }

          li {
            width: 100%;
            padding: 0 14px;
            height: 34px;

            @include flex(row, space-between, center);

            img {
              width: 22px;
              height: 22px;
              margin: 0;
              border-radius: 11px;
            }

            span {
              font-size: 14px;
              color: #8492a6;
            }
          }
        }

        .rotate {
          transform: rotate(180deg);
        }
      }

      img {
        width: 32px;
        margin: 0 5px;
      }

      strong {
        display: block;
        width: 2px;
        height: 28px;
        background-color: #4a4c53;
      }

      .el-select__placeholder {
        color: #fff;
        font-size: 16px;
      }

      .el-select__wrapper {
        padding: 0 0 !important;
        padding-left: 10px !important;
        border: none !important;
      }
    }

    .login {
      width: 90%;
      display: block;
      height: 42px;
      border: none;
      padding: 0;
      background-color: #0a906c !important;
      text-align: center;
      margin: 15px 0 5px;
      font-size: 15px;
      color: #fff;
      border-radius: 10px;
    }

    .password {
      width: 100%;
      @include flex(row, flex-start, center);
      border-radius: 10px;
      background-color: rgb(40, 43, 48);
      border: 1px solid transparent;

      &:hover {
        border: 1px solid #0a906c;
      }

      &:focus {
        border: 1px solid #0a906c;
        outline: none;
      }

      &:focus-within {
        border: 1px solid #0a906c;
        outline: none;
      }

      strong {
        display: block;
        width: 2px;
        height: 28px;
        background-color: #4a4c53;
      }

      .el-icon {
        margin: 0 5px;
      }
    }

    .checkbox {
      width: 90%;
      @include flex(row, space-between, center);

      span {
        text-decoration: underline;
        font-size: 14px;
        color: #0a906c;
        cursor: pointer;
      }

      .el-checkbox {
        --el-checkbox-checked-input-border-color: #0a906c;
        --el-checkbox-checked-bg-color: #0a906c;
      }

      .el-checkbox__label {
        color: #606266;
      }

      .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #0a906c !important;
      }
    }

    .el-input__wrapper {
      background-color: rgb(40, 43, 48);
      height: 40px;
      box-shadow: none;
      color: #fff;
    }

    .el-select__wrapper {
      background-color: rgb(40, 43, 48);
      height: 40px;
      box-shadow: none;
      color: #fff;
    }
  }
}
</style>
